<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>${postype.ptname}岗位列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style>
        /* 自定义页面主体容器的样式，增加一些外边距和内边距，使其在页面中布局更合理 */
        .page-container {
            margin: 20px;
            padding: 20px;
            background-color: #f8f9fa; /* 浅灰色背景，营造柔和的视觉效果 */
            border-radius: 5px; /* 圆角边框，使外观更柔和 */
        }

        /* 滚动容器样式，用于实现卡片的滚动浏览 */
        .job-cards-scroll {
            max-height: 400px; /* 设置最大高度，超出该高度出现滚动条 */
            overflow-y: auto; /* 纵向滚动条，只在内容超出时显示 */
            padding-right: 5px; /* 右侧添加一点内边距，避免滚动条覆盖内容 */
        }

        /* 岗位卡片样式 */
        .job-card {
            margin-bottom: 15px;
            margin-right: 15px;
            border: 1px solid #dee2e6; /* 淡灰色边框，增强区分度 */
            border-radius: 5px; /* 圆角边框 */
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* 卡片阴影，增加立体感 */
            width: calc(33.33% - 15px); /* 每行显示3张卡片，根据外边距计算宽度占比 */
            float: left; /* 左浮动，实现多列布局 */
        }

        .job-card-header {
            background-color: #007bff; /* 卡片头部背景色为蓝色，突出显示 */
            color: white; /* 头部文字颜色设为白色，增强对比度 */
            padding: 15px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .job-card-body {
            padding: 15px;
        }

        /* 卡片图片样式 */
        .job-card-image {
            width: 100%;
            height: 150px;
            object-fit: cover; /* 图片按比例缩放，填满容器并裁剪多余部分 */
            border-radius: 5px;
            margin-bottom: 10px;
        }

        /* 操作按钮样式调整，增加一些间距，使其看起来更整齐 */
        .job-card-btn {
            margin-right: 10px;
        }

        /* 当没有岗位信息时的提示框样式优化 */
        .no-job-alert {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef; /* 淡灰色背景 */
            border: 1px solid #dee2e6; /* 边框颜色与卡片统一 */
            border-radius: 5px; /* 圆角边框 */
            color: #495057; /* 文字颜色 */
        }

        /* 清除浮动，避免父容器高度塌陷 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
<!--header-->
<jsp:include page="/header.jsp">
    <jsp:param name="flag" value="1"></jsp:param>
</jsp:include>

<!-- 页面主体内容 -->
<div class="page-container">
    <h2 class="mb-4">岗位</h2>
    <h2 class="mb-4">公司</h2>
    <c:if test="${not empty posts}">
        <div class="job-cards-scroll clearfix">
            <c:forEach var="post" items="${posts}">
                <div class="card job-card">
                    <div class="card-header job-card-header">
                        <h5 class="card-title">${post.pname}</h5>
                    </div>
                    <div class="card-body job-card-body">
                        <img src="${post.image}" alt="${post.pname}" class="job-card-image">
                        <p class="card-text">${post.description}</p>
                        <a href="#" class="btn btn-primary btn-sm job-card-btn">预约面试</a>
                    </div>
                </div>
            </c:forEach>
        </div>
    </c:if>
    <c:if test="${empty posts}">
        <div class="no-job-alert alert alert-info" role="alert">
            暂无 ${postype.ptname} 相关岗位信息
        </div>
    </c:if>
</div>

<!--footer-->
<jsp:include page="/footer.jsp"></jsp:include>
</body>
</html>